<template>
  <div class="wd-form-item_content wh">
    <a-input v-if="currentFildData.type==='input'" autocomplete="off" size="default" v-model:value.trim="currentForm[currentFildData.field]"
      :allowClear='true' :placeholder="currentFildData.placeholder?currentFildData.placeholder:currentFildData.label"
      v-bind="currentFildData.options" class="wd-form-item" />
    <a-input-number v-if="currentFildData.type==='inputNumber'" size="default" autocomplete="off"
      v-model:value="currentForm[currentFildData.field]" :allowClear='true'
      :placeholder="currentFildData.placeholder?currentFildData.placeholder:currentFildData.label"
      v-bind="currentFildData.options" class="wd-form-item" />
    <a-select v-else-if="currentFildData.type==='select'" v-model:value="currentForm[currentFildData.field]"
      :placeholder="currentFildData.label" @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])"
      :filter-option="filterOption" show-search option-filter-prop="label" :maxTagCount="2" :allowClear='true'
      class="wd-form-item" v-bind="currentFildData.options">
      <template v-if="currentFildData.dataList">
        <a-select-option :value="sItem.value" :disabled="sItem.disabled===true" :key="sIndex" :label="sItem.label"
          v-for="(sItem,sIndex) in currentFildData.dataList">{{sItem.label}}</a-select-option>
      </template>
      <!-- <template #clearIcon>
                <svg class="icon-sm" aria-hidden="true">
                    <use xlink:href="#iconcedaohang_yingxiaohuoke" />
                </svg>
            </template> -->
    </a-select>
    <a-checkbox-group v-else-if="currentFildData.type==='checkbox'" v-model:value="currentForm[currentFildData.field]"
      v-bind="currentFildData.options" :placeholder="currentFildData.label"
      @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])" class="wd-form-item">
      <template v-if="currentFildData.dataList">
        <a-checkbox :value="sItem.value" :key="sIndex" v-for="(sItem,sIndex) in currentFildData.dataList">
          {{sItem.label}}</a-checkbox>
      </template>
    </a-checkbox-group>
    <a-radio-group v-else-if="currentFildData.type==='radio'" v-model:value="currentForm[currentFildData.field]"
      v-bind="currentFildData.options" @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])"
      class="wd-form-item">
      <template v-if="currentFildData.dataList">
        <a-radio :value="sItem.value" :key="sIndex" v-for="(sItem,sIndex) in currentFildData.dataList">{{sItem.label}}
        </a-radio>
      </template>
    </a-radio-group>
    <a-textarea v-else-if="currentFildData.type==='textarea'" showCount
      v-model:value="currentForm[currentFildData.field]" allow-clear :placeholder="currentFildData.label"
      class="form-textarea" v-bind="currentFildData.options" />
    <a-range-picker :value-format="'YYYY-MM-DD HH:mm:ss'" v-else-if="currentFildData.type==='rangePicker'" show-time
      v-model:value="currentForm[currentFildData.field]" :getPopupContainer="getContainer" :allowClear='true'
      @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])"
      class="wd-form-item" v-bind="currentFildData.options" />
    <a-date-picker :value-format="'YYYY-MM-DD HH:mm:ss'" v-else-if="currentFildData.type==='datePicker'"
      v-model:value="currentForm[currentFildData.field]" :getPopupContainer="getContainer"
      @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])"
      :placeholder="currentFildData.label" :allowClear='true' class="wd-form-item" v-bind="currentFildData.options" />
    <a-cascader v-else-if="currentFildData.type==='cascader'" v-model:value="currentForm[currentFildData.field]"
      :placeholder="currentFildData.label" @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])"
      :getPopupContainer="getContainer" :options="currentFildData.dataList" :show-search="{ cascaderFilter }"
      change-on-select :allowClear='true' v-bind="currentFildData.options" class="wd-form-item" />
    <!-- 下拉树形选择 -->
    <a-tree-select v-else-if="currentFildData.type==='treeSelect'" :maxTagCount="3"
      v-model:value="currentForm[currentFildData.field]" :placeholder="currentFildData.label"
      :getPopupContainer="getContainer" @change="(value, label, extra)=>changeSelectFun(currentFildData,currentForm[currentFildData.field],extra)"
      :labelInValue="true" :multiple="true" :tree-data="currentFildData.dataList" tree-checkable :allowClear='true'
      class="wd-form-item" v-bind="currentFildData.options" />
    <!-- 下拉复选框选择 -->
    <a-tree-select v-else-if="currentFildData.type==='checkBoxSelect'" :maxTagCount="3"
      v-model:value="currentForm[currentFildData.field]" :placeholder="currentFildData.label"
      :getPopupContainer="getContainer" dropdownClassName="checkBoxSelect"
      @change="changeSelectFun(currentFildData,currentForm[currentFildData.field])" :labelInValue="true"
      :multiple="true" :tree-data="currentFildData.dataList" tree-checkable :allowClear='true'
      class="wd-form-item checkBoxSelect" v-bind="currentFildData.options" />
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed, getCurrentInstance } from 'vue'
import {
  DataListInterFace,
  FormDataInterFace,
  FieldListInterFace
} from './IFormInterFace'
// import { DatePicker, Input, Select, Checkbox, Radio, Cascader, TreeSelect, InputNumber } from 'ant-design-vue'
export default defineComponent({
  name: 'wd-form-item',
  props: {
    formField: {
      type: Object as PropType<FormDataInterFace>,
      required: true
    },
    currentFildData: {
      type: Object as PropType<FieldListInterFace>,
      required: true
    }
  },
  setup (props, ctx) {
    const appCtx = getCurrentInstance()
    const getContainer = () => appCtx && appCtx.appContext.app._container
    const filterOption = (input: string, option: any) => {
      return option.label.indexOf(input) >= 0
    }
    const cascaderFilter = (inputValue: string, path: DataListInterFace[]) => {
      return path.some((option) => option.id.indexOf(inputValue) > -1)
    }
    const currentForm: FormDataInterFace = computed(() => {
      return props.formField
    })
    const changeSelectFun = (item: FieldListInterFace, data: any, extra?:any) => {
      if (item.callback) {
        ctx.emit('changeSelectFun', item, data, extra)
      }
    }
    return {
      getContainer,
      filterOption,
      cascaderFilter,
      currentForm,
      changeSelectFun
    }
  },
  methods: {},
  components: {
    // 'a-date-picker': DatePicker,
    // 'a-range-picker': DatePicker.RangePicker,
    // // 'a-month-picker': DatePicker.MonthPicker,
    // // 'a-week-picker': DatePicker.WeekPicker,
    // 'a-input': Input,
    // 'a-textarea': Input.TextArea,
    // 'a-select': Select,
    // 'a-select-option': Select.Option,
    // 'a-checkbox': Checkbox,
    // 'a-checkbox-group': Checkbox.Group,
    // 'a-radio': Radio,
    // 'a-radio-group': Radio.Group,
    // 'a-cascader': Cascader,
    // 'a-tree-select': TreeSelect,
    // 'a-input-number': InputNumber
  }
})
</script>
